<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
       <style type="text/css">
       		body{
				background-image:url(img/3.jpg);
			}
       		canvas{
       			width:1728px !important;
       			height:816px !important;
       		}
       		#topdiv{
       			height:91px;
       		}
       		button{
       			margin-top:20px;
				width:150px;
				height:50px;
				font-size:140%;
				background: url(img/7.jpg)no-repeat;
				background-size:120% 120%;
				background-position:-10px -5px;
				border-radius:25px;
			}
			span{
				margin-left:500px;
				font-size:200%;
			}
       </style>
   </head>
   <body style="height: 100%; margin: 0">
   		<div id="topdiv">
   			<a href="/index.html"><button>返回首页</button></a>
   			<span>IT各行业不同学历全国招聘人数</span>
   		</div>
       <div id="container" style="height: 100%"></div>
       <script type="text/javascript" src="/data/jquery-1.2.6.min.js" charset="utf-8"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
       <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
       <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
$.ajax({
	url : 'company/technology/3d', 
	cache : false, 
	async : false, 
	type : "GET", 
	dataType : 'json', 
	success : function (result){
		console.log(result);
		var 中专=result.中专;
		var 大专 = result.大专;
		var 本科=result.本科;
		var 硕士 = result.硕士;
		var 博士=result.博士;
		var 不限 = result.不限;
		var hours = ['java', 'ui', 'web', '网络营销', 'android', 'ios', 'c++',
		        '软件测试', '嵌入式', 'linux','Unity3D','.net',
		        '运维'];
		var days = [ '中专','大专', '本科', '硕士', '博士','不限'];
		
		var data = [[0,0,中专[0]],[0,1,中专[1]],[0,2,中专[2]],[0,3,中专[3]],[0,4,中专[4]],[0,5,中专[5]],[0,6,中专[6]],
					[0,7,中专[7]],[0,8,中专[8]],[0,9,中专[9]],[0,10,中专[10]],[0,11,中专[11]],[0,12,中专[12]],
					
					[1,0,大专[0]],[1,1,大专[1]],[1,2,大专[2]],[1,3,大专[3]],[1,4,大专[4]],[1,5,大专[5]],[1,6,大专[6]],
					[1,7,大专[7]],[1,8,大专[8]],[1,9,大专[9]],[1,10,大专[10]],[1,11,大专[11]],[1,12,大专[12]],
					
					[2,0,本科[0]],[2,1,本科[1]],[2,2,本科[2]],[2,3,本科[3]],[2,4,本科[4]],[2,5,本科[5]],[2,6,本科[6]],
					[2,7,本科[7]],[2,8,本科[8]],[2,9,本科[9]],[2,10,本科[10]],[2,11,本科[11]],[2,12,本科[12]],
					
					[3,0,硕士[0]],[3,1,硕士[1]],[3,2,硕士[2]],[3,3,硕士[3]],[3,4,硕士[4]],[3,5,硕士[5]],[3,6,硕士[6]],
					[3,7,硕士[7]],[3,8,硕士[8]],[3,9,硕士[9]],[3,10,硕士[10]],[3,11,硕士[11]],[3,12,硕士[12]],
					
					[4,0,博士[0]],[4,1,博士[1]],[4,2,博士[2]],[4,3,博士[3]],[4,4,博士[4]],[4,5,博士[5]],[4,6,博士[6]],
					[4,7,博士[7]],[4,8,博士[8]],[4,9,博士[9]],[4,10,博士[10]],[4,11,博士[11]],[4,12,博士[12]],
					
					[5,0,不限[0]],[5,1,不限[1]],[5,2,不限[2]],[5,3,不限[3]],[5,4,不限[4]],[5,5,不限[5]],[5,6,不限[6]],
					[5,7,不限[7]],[5,8,不限[8]],[5,9,不限[9]],[5,10,不限[10]],[5,11,不限[11]],[5,12,不限[12]]
					];
		option = {
		    tooltip: {},
		    visualMap: {
		        max: 20,
		        inRange: {
		            color: ['#ec5447','#fdd901','#5bc15b']
		        }
		    },
		    xAxis3D: {
		        type: 'category',
		        axisLabel:{interval:0,textStyle:{fontSize:20}},
		        data: hours
		    },
		    yAxis3D: {
		        type: 'category',
		        axisLabel:{textStyle:{fontSize:20}},
		        data: days
		    },
		    zAxis3D: {
		        type: 'value'
		    },
		    grid3D: {
		    	top:-91,
		        boxWidth: 200,
		        boxDepth: 80,
		        viewControl: {
		            // projection: 'orthographic'
		        },
		        light: {
		            main: {
		                intensity: 1.2,
		                shadow: true
		            },
		            ambient: {
		                intensity: 0.3
		            }
		        }
		    },
		    series: [{
		        type: 'bar3D',
		        data: data.map(function (item) {
		            return {
		                value: [item[1], item[0], item[2]],
		            }
		        }),
		        shading: 'lambert',
		
		        label: {
		            textStyle: {
		                fontSize: 16,
		                borderWidth: 1
		            }
		        },
		
		        emphasis: {
		            label: {
		                textStyle: {
		                    fontSize: 20,
		                    color: '#900'
		                }
		            },
		            itemStyle: {
		                color: '#900'
		            }
		        }
		    }]
		};
		if (option && typeof option === "object") {
		    myChart.setOption(option, true);
		}
	}
});

       </script>
       
   </body>
</html>